<template>
  <div class="receipt-order-print" ref="receiptOrderPrintRef" hidden="hidden">
    <div class="title">{{ row.YTNo || row.orderNo || row.shipmentOrderNo }}</div>
    <VueBarcode v-if="row.YTNo" :value="row.YTNo" height="30px" :width="1" :fontSize="16" style="max-width: 100px;max-height: 68px;" :background="'transparent'" />
    <div class="summary">
      <div class="col1">Customer: {{ row.customerName }}</div>
      <div class="col1">Order No.: {{ row.orderNo || row.YTNo || row.shipmentOrderNo }}</div>
      <div class="col1">Outbound type: {{ 'E-commerce outbound' }}</div>
      <div class="col1">Date: {{ row.createTime }}</div>
      <div class="col1">Outbound person: {{ row.createByName }}</div>
    </div>
    <table class="common-table">
      <tr>
        <th>SKU Name</th>
        <th>Material No</th>
        <th>SKU code</th>
        <th>Count</th>
        <th>Warehouse/storage area</th>
      </tr>
      <tr v-for="it in row.details">
        <td>{{ it.itemName || '' }}</td>
        <td>{{ it.itemNo || '' }}</td>
        <td>{{ it.skuCode || '' }}</td>
        <td>{{ it.planQuantity }}</td>
        <td>{{ it.place }}</td>
      </tr>
      <tr>
        <td>Amount to</td>
        <td></td>
        <td></td>
        <td>{{ row.totalCount }}</td>
        <td></td>
      </tr>
    </table>
    <div class="foot">
      <div class="col2">Notes: {{ row.remark }}</div>
    </div>
  </div>
</template>

<script>
import VueBarcode from 'vue-barcode'
export default {
  components: { VueBarcode },
  props: ['row'],
  methods: {
    start() {
      this.$print(this.$refs.receiptOrderPrintRef, {}, 'A4')
    },
  }
}
</script>

<style lang="stylus" media="print">
@page {
  size: auto;
  margin: 0;
}

@media print {
  * {
    color: #000 !important;
  }

  table {
    width 100%
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table, tbody, thead {
    width: 100% !important;
  }

  .receipt-order-print {
    width: 100% !important;
    font-size: 14px;
  }

  table, table tr th, table tr td {
    border: 0.05rem solid #000;
    font-size: 12px;
  }

}

.receipt-order-print
  padding 12px
  line-height 1.8

  .summary
    display flex
    flex-wrap wrap

    .col1
      width 50%

  .title
    font-size 18px
    text-align center

  .common-table
    td, th
      border-color black
</style>
